<template>
  <div class="navs">
    <div :class="{inner: true, fixed: fixed}">
      <a :class="{active: selected=='baseInfo'}" @click="handleNavClick('baseInfo')">基础信息</a>
      <a :class="{active: selected=='memberInfo'}" @click="handleNavClick('memberInfo')">会员信息</a>
      <a :class="{active: selected=='socialInfo'}" @click="handleNavClick('socialInfo')">兴趣与社交属性</a>
      <a :class="{active: selected=='householdInfo'}" @click="handleNavClick('householdInfo')">家电基本信息</a>
      <a :class="{active: selected=='familyInfo'}" @click="handleNavClick('familyInfo')">家庭信息</a>
      <a :class="{active: selected=='demandInfo'}" @click="handleNavClick('demandInfo')">消费需求</a>
      <a :class="{active: selected=='tagInfo'}" @click="handleNavClick('tagInfo')">标签/群组</a>
    </div>
  </div>
</template>
<script>
  import scrollFixed from '@/mixins/scrollFixed'
  import {getOffset} from '@/utils'
  export default {
    mixins: [scrollFixed],
    data () {
      return {
        selected: 'baseInfo'
      }
    },
    methods: {
      handleNavClick (id) {
        const $target = document.getElementById(id)
        this.selected = id
        scrollTo(0, getOffset($target).y - 40)
      }
    }
  }
</script>
